<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <style type="text/css">
        .navbar-brand{
            width: 180px;
            height: 48px;
            padding-left:6px;
            font-size: 23px;
            font-style:italic;
            font-weight: bold;
            font-family:sans-serif;
        }
    </style>
</head>
<body>
<nav class="navbar navbar-expand-sm navbar-dark bg-transparent fixed-top">
    <a href="/index">
        <span class="navbar-brand">Sunshine课程表</span>
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="collapsibleNavbar">
        <!--这块要设置mr-auto，要不登录注册不能居右-->
        <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
            <li class="nav-item">
                <a class="nav-link" href="/index" style="color: white;font-weight: bold;margin-right: 16px">首页</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="/schedule" style="color: white;font-weight: bold;margin-right: 16px">课表</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="/function" style="color: white;font-weight: bold">功能</a>
            </li>
        </ul>
        <!--未登录状态-->
        <ul class="navbar-nav my-2 my-lg-0" th:hidden="${login}">
            <li class="nav-item mr-sm-2">
                <a class="nav-link" href="/login" style="color: white;font-size: small;">注册</a>
            </li>
            <li class="nav-item my-2 my-sm-0">
                <a class="nav-link" href="/login" style="color: white;font-size: small;">登录</a>
            </li>
        </ul>
        <!--已登录状态-->
        <ul class="navbar-nav my-2 my-lg-0" th:hidden="!${login}">
            <li class="nav-item mr-sm-2">
                <a class="nav-link" href="#" th:text="${userId}" style="color: white;font-size: small;"></a>
            </li>
            <li class="nav-item my-2 my-sm-0">
                <a class="nav-link" href="/logout" style="color: white;font-size: small;">注销</a>
            </li>
        </ul>
    </div>
</nav>
</body>
</html>